<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>todulist</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/localdata.js"></script>
</head>

<body>
    <header>
        <section>
            <form>
                <label for="title">ToDoList</label>
                <input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
                    autocomplete="off" />
            </form>
        </section>
    </header>
    <section>
        <h2>今日事项 <span id="todocount">0</span></h2>
        <ol id="todolist" class="demo-box">
            <!-- `<p>{{usrTxt}}</p> <a href="javascript:;" onclick="del(this)"></a>` -->
            <!-- <p>{{content}}</p><a href="javascript:;"></a> -->
        </ol>
    </section>

    <section>
        <h2>已完成事项 <span id="todoall">0</span></h2>
        <ol id="list" class="demo-box">

        </ol>
    </section>


    <footer>
        Copyright &copy; 嗨~帅哥
    </footer>

    <script type="text/html" id='tpl-table'>
        <li class="toduli">
             <p>{{content}}</p><a href="javascript:;" class="aj"></a>
        </li>
    </script>

    <script type="text/html" id='tpl-table-1'>
        <li class="toduli-1">
             <p>{{content}}</p><a href="javascript:;" class="bj"></a>
        </li>
    </script>
    <script src="./jq/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <script>
        // 获取两项中的li的个数
        let lenbj = $('#list').children('li').length
        let lenaj = $('#todolist').children('li').length
        // submit
        // form表单提提交
        // function getData() {
        //     const data = localStorage.setItem('tenko')
        //     if (data !== null) {
        //         return JSON.parse(data)
        //     }
        //     return []
        // }
        // function setData() {

        // }
        $('form').on('submit', function (e) {
            e.preventDefault()
            const data = {
                falg: 0,
                content: $('#title').val()
            }
            // let local = getData()
            // local.push(data)
            // localStorage.setItem('tenko', JSON.stringify(local))
            render(data)
            $('#title').val('')

        })

        // 已完成事件提交
        $('#todolist').on('dblclick', '.toduli', function () {
            // alert(11)
            const data = {
                falg: 1,
                index: $(this).index(),
                content: $(this).children('p').text()
            }
            // console.log(data);
            render(data)
        })
        // 事件退回
        $('#list').on('dblclick', '.toduli-1', function () {
            // alert(11)
            const data = {
                falg: 2,
                index: $(this).index(),
                content: $(this).children('p').text(),
            }
            render(data)
        })

        // 渲染数据 
        function render(data) {
            if (data.falg == 1) {
                const newToLi = template('tpl-table-1', data);
                $('#list').append(newToLi)
                $('.toduli').eq(data.index).remove()
                // let len = $('#list').children('li').length
                // $('#todoall').text(len)
                lenaj--;
                lenbj++;

            } else if (data.falg == 2) {
                $('.toduli-1').eq(data.index).remove()
                // 利用模板字符串添加内容
                const newLiHtml = template('tpl-table', data);
                // console.log(newLiHtml);
                $('#todolist').append(newLiHtml)
                lenbj--;
                lenaj++;
            }
            else {
                // 利用模板字符串添加内容
                const newLiHtml = template('tpl-table', data);
                // console.log(newLiHtml);
                $('#todolist').append(newLiHtml)
                lenaj++;
            }
            // 获取li个数

            // console.log(len);
            //e.显示数量
            count(lenaj, lenbj)

        }


        // 右侧数量显示
        function count(lenaj, lenbj) {
            // console.log(lenaj, lenbj);
            $('#todocount').text(lenaj)
            $('#todoall').text(lenbj)

        }

        // function del() {
        //     //a.删除 按钮 所在的 li 标签
        //     // todoOL.removeChild(delBtn.parentNode);
        //     $('#todolist').remove($(this).parent())
        //     // ol                a      li
        //     //b.显示数量
        //     let len = $('#todolist').children('li').length
        //     // console.log(len);
        //     //e.显示数量
        //     count(len)
        // }


        // 点击删除函数
        $('#todolist ,#list').on('click', '.bj , .aj', function () {
            // console.log($(this));
            // console.log($('.aj')[0]);
            // console.log(this == $('.aj')[0]);
            let index = $(this).parent().index()

            if (this == $('.aj')[index]) {
                // console.log(11);
                lenaj--;
                $(this).parent().remove()
            } else if (this == $('.bj')[0]) {
                // console.log(22);
                lenbj--;
                $(this).parent().remove()
            }
            count(lenaj, lenbj)
        })



        // localStorage.setItem('tenko',)
    </script>

</body>

</html>